<template>
  <div class="search">
    <!-- 导航栏 -->
    <!-- 向左箭头被点击跳转到面经分享页面 -->
    <hmnavbar path="/shareList" title="面经搜索" />
    <!-- 搜索栏 -->
    <van-search
      v-model="value"
      show-action
      shape="round"
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
    />
    <div v-if="isShow">
      <!-- 热门搜索 -->
      <div class="hot">
        <div class="title">大家都在搜</div>
        <div class="tags">
          <!-- 渲染热门搜索关键字,并且给热门关键字设置点击事件,并将关键字传入 -->
          <span
            @click="search(item)"
            v-for="(item, index) in hotKeys"
            :key="index"
            >{{ item }}</span
          >
        </div>
      </div>
      <!-- 历史搜索 -->
      <div class="history">
        <van-cell title="历史搜索">
          <template #default>
            <span @click="clear">清空</span>
          </template>
        </van-cell>
        <div class="tags">
          <!-- 给历史搜索关键字设置点击事件,并将关键字传入 -->
          <span
            @click="search(item)"
            v-for="(item, index) in historyList"
            :key="index"
            >{{ item }}</span
          >
        </div>
      </div>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      v-else
    >
      <share
        :item="item"
        v-for="(item, index) in searchList"
        :key="index"
      ></share>
    </van-list>
  </div>
</template>
<script>
import { getHotKeysApi, getShareApi } from '../../../api/find.js'
// 导入子组件
import share from '../find/share'
// 导入操作历史搜索的方法
import { setHistory, getHistory, removeHistory } from '../../../utils/local'
export default {
  name: 'search',
  components: {
    share
  },
  data () {
    return {
      value: '' /* 搜索关键字 */,
      hotKeys: [] /* 热门搜索关键字 */,
      start: 0,
      limit: 5,
      searchList: [] /* 根据搜索关键字获取的数据列表 */,
      total: 0 /* 记录获取的总条数 */,
      isShow: true /* 控制显示的是热门搜索还是面经列表 */,
      loading: false,
      finished: false,
      historyList: [] /* 存储历史搜索 */
    }
  },
  created () {
    // 页面一加载获取热门搜索关键字
    this.getHotKeys()
    // 页面一加载就显示历史搜索,当本地没有历史搜时就设置为空数组,否者historyList就是null,是push不进去后面的数据的
    this.historyList = JSON.parse(getHistory()) || []
  },
  // watch: {
  //   //   监听value,当手动删除输入框中的内容时使其与点击取消有一样的效果
  //   value (newval) {
  //     if (!newval) {
  //       // 将数据初始化
  //       this.onCancel()
  //     }
  //   }
  // },
  methods: {
    // 清空历史搜索关键字的操作
    clear () {
      // 1.询问用户是否要清空历史搜索关键字
      this.$dialog
        .confirm({
          title: '标题',
          message: '弹窗内容'
        })
        .then(() => {
          // 2.将历史列表置空
          this.historyList = []
          // 3.将保存在本地的历史列表也删除
          removeHistory()
          // 4.提示已清空
          this.$toast.success('历史搜索已清空')
        })
        .catch(() => {})
    },
    // 点击手机键盘的完成触发搜索功能(与点击热门关键字操作一致)
    onSearch (keywords) {
      // 每次搜索前先初始化data中的数据
      // 2.初始化数据(将数据恢复成未搜索过的样子,二次搜索需要)
      this.searchList = []
      this.finished = false
      // 每次点击取消都将获取数据的起始位置改回初始值
      this.start = 0
      // 然后再进行搜索
      this.search(keywords)
    },
    // 点击取消触发的功能
    onCancel () {
      // 1.隐藏面经列表
      this.isShow = true
      // 2.初始化数据(将数据恢复成未搜索过的样子)
      this.searchList = []
      this.finished = false
      // 每次点击取消都将获取数据的起始位置改回初始值
      this.start = 0
    },
    // 获取热门搜索关键字
    async getHotKeys () {
      const res = await getHotKeysApi()
      this.hotKeys = res.data
    },
    // 点击热门关键字实现搜索功能
    search (keywords) {
      // 1.将搜索关键字填充进输入框
      this.value = keywords
      // 2.显示面经列表
      this.isShow = false
      // 3.判断搜索关键字是不是为空
      if (!this.value) return
      // 4.当搜索关键字不为空的时候将搜索关键字存到历史关键字列表中
      this.historyList.unshift(this.value)
      // 将搜索关键字进行去重操作
      this.historyList = [...new Set(this.historyList)]
      // 限制历史搜索关键字的个数
      this.historyList.splice(6)
      // 4.并将数据存到localStorage中
      setHistory(JSON.stringify(this.historyList))
    },
    // 面经列表加载的操作
    async onLoad () {
      // 根据搜索关键字发送请求获取面经分享列表和总条数
      const res = await getShareApi({
        start: this.start,
        limit: this.limit,
        q: this.value
      })
      this.searchList.push(...res.data.list)
      this.total = res.data.total
      this.loading = false
      this.start += this.limit
      // 处理列表中的数据,将数据中标题中的关键字用红色显示
      this.searchList.forEach(item => {
        item.title = item.title.replace(
          this.value,
          `<span style="color:#e40137">${this.value}</span>`
        )
      })

      if (this.searchList.length >= this.total) {
        this.finished = true
      }
    }
  }
}
</script>
<style lang="less" scoped>
.search {
  .hot {
    padding: 0 15px;
    .title {
      font-size: 18px;
      color: #222222;
      font-weight: 500;
      margin: 20px 0;
    }
    .tags {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 40px;
      span {
        padding: 6px;
        border-radius: 4px;
        background-color: #f7f4f5;
        font-size: 12px;
        color: #545671;
        margin-right: 10px;
      }
    }
  }
  .history {
    /deep/ .van-cell__title {
      font-size: 18px;
      color: #222222;
      font-weight: 500;
    }
    .tags {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 40px;
      padding: 0 15px;
      span {
        padding: 6px;
        border-radius: 4px;
        background-color: #f7f4f5;
        font-size: 12px;
        color: #545671;
        margin-right: 10px;
      }
    }
  }
}
</style>
